<template>
    <div class="sustainableSty">
        <!-- <a href="#box1">点击这</a> -->
        <div v-html='info.content'></div>
        <div class="mt20 pb10"  id="box1" v-if="info.attachment_list.length>0">
            <div class="color666 mb10 flex">【附件下载】<img src="../../assets/image/enclosure1.png" class="relative fjImg"/></div>
            <ul>
                <li v-for="(item,index) in info.attachment_list" :key="index" class="mr10 mb10 colorBlue" @click="goDownload(item)">{{item.name}}</li>
            </ul>
        </div>
        <a href="#box1" v-if="info.attachment_list.length>0" class="circleSty center flex flexColumn flexCenter alignCenter colorfff">附件</a>
    </div>
</template>
<script>
import {Toast} from 'vant';
// import VConsole from 'vconsole'
// let vConsole=new VConsole()

export default {
    name:'articleDetial',
    data(){
        return {
            id:'',
            info:{attachment_list:[]}
        }
    },
    created(){
        this.id=this.$route.query.id
        this.getArticleDetail()
        // let video=document.getElementsByTagName('video')
        // console.log('video',video)
        // video.controls=false
        this.getWxInfo()
    },
    methods:{
        getWxInfo(){//获取微信配置项
            let that=this
            let url = `${window.location.href}`
            let obj={url:url}
            this.$apiRequest.getWxInfo(obj).then(r=>{
                console.log('获取微信信息',r)
                if(r.code==1){
                    let info=r.data
                    wx.config(info.config);
                    wx.ready(()=> {
                        wx.agentConfig({
                            corpid: info.agentConfig.corpid, 
                            agentid: info.agentConfig.agentid, 
                            timestamp: info.agentConfig.timestamp, // 必填，生成签名的时间戳
                            nonceStr: info.agentConfig.nonceStr, // 必填，生成签名的随机串
                            signature: info.agentConfig.signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
                            jsApiList: info.agentConfig.jsApiList, //必填，传入需要使用的接口名称
                            success: function(res) {
                                console.log('agentConfig成功',res)
                                // 回调
                                // alert('成功来啦啦啦')
                            },
                            fail: function(res) {
                                console.log('agentConfig失败',res)
                                if(res.errMsg.indexOf('function not exist') > -1){
                                    // alert('版本过低请升级')
                                }
                            }
                        });
                    })
               
                }
            })
        },
        getArticleDetail(){
            Toast.loading({
                message: '加载中',
            })
            this.$apiRequest.getArticleDetail({id:this.id}).then(res=>{
                console.log('详情',res)
                Toast.clear()
                if(res.code==1){
                    this.info=res.data
                }
            })
        },
        goDownload(e){
            console.log('下载详情',e)
            wx.previewFile({
                url: e.url, // 需要预览文件的地址(必填，可以使用相对路径)
                name: e.name, // 需要预览文件的文件名，必须有带文件格式的后缀，例如.doc(不填的话取url的最后部分，最后部分是个包含格式后缀的文件名)
                size: e.size // 需要预览文件的字节大小(必填，而且大小必须正确，否则会打开失败)
            });
        }
    }
}

</script>
<style lang="less">
.sustainableSty{
    img,video{
        width: 100% !important;
        height: auto !important;
    }
    .fjImg{
        width:0.32rem !important;
        height:0.33rem !important;
        top: 0.06rem;
    }
    
}

.circleSty{
    position: fixed;
    right: 0.1rem;
    top: 40%;
    width: 1rem;
    height: 1rem;
    // line-height: 1rem;
    border-radius: 50%;
    // background-color: #fff;
    background-color: rgba(0,0,0,0.4);
}
/* 所有控件 */
// .sustainableSty video::-webkit-media-controls-enclosure{
//     display: none !important;
// }
// .sustainableSty{
//     video::-webkit-media-controls{ 

//     display:none !important;

//     }
//     /* //全屏按钮 */
//     video::-webkit-media-controls-fullscreen-button {
//     display: none;
//     }
//     /* 播放按钮 */
//     video::-webkit-media-controls-play-button {
//     display: none;
//     }
//     /* 进度条 */
//     video::-webkit-media-controls-timeline {
//     display: none;
//     }
//     /* 观看的当前时间 */
//     video::-webkit-media-controls-current-time-display{
//     display: none;
//     }
//     /* 剩余时间 */
//     video::-webkit-media-controls-time-remaining-display {
//     display: none;
//     }
//     /* 音量按钮 */
//     video::-webkit-media-controls-mute-button {
//     display: none;
//     }
//     video::-webkit-media-controls-toggle-closed-captions-button {
//     display: none;
//     }
//     /* 音量的控制条 */
//     video::-webkit-media-controls-volume-slider {
//     display: none;
//     }
// }

</style>
<style lang="less" scoped>
.sustainableSty{
    margin: 0.2rem auto;
    width: 92%;
    ul li{
        text-decoration: underline;
    }
}
</style>
